<!DOCTYPE html>
<html>

<head>
    <title>
        购物车
    </title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">


    <script src="js/jquery-3.4.1.min.js" type="text/javascript"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="js/jquery.json.min.js" type="text/javascript"></script>
    <link rel="stylesheet" href="css/cart.css">
    <link rel="stylesheet" href="css/footer.css">
    <link rel="stylesheet" href="css/header.css">

</head>

<body>
    <nav class="navbar navbar-default">
        <div class="container-fluid">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                  <span class="sr-only">Toggle navigation</span>
                  <span class="icon-bar"></span>
                  <span class="icon-bar"></span>
                  <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">
                    <img alt="Brand" src="img/navbrand1.png" width="127" height="29" id="brand">
                </a>
            </div>

            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse navf" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">


                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">课程分类<span class="caret"></span></a>
                        <ul class="dropdown-menu">
                            <li><a href="#">Action</a></li>
                            <li><a href="#">Another action</a></li>
                            <li><a href="#">Something else here</a></li>
                            <li role="separator" class="divider"></li>
                            <li><a href="#">Separated link</a></li>
                            <li role="separator" class="divider"></li>
                            <li><a href="#">One more separated link</a></li>
                        </ul>
                    </li>
                    <li><a href="#">专业</a></li>
                    <li><a href="#">关注领福利</a></li>
                </ul>
                <form class="navbar-form navbar-left">
                    <div class="input-group">

                        <input type="text" class="form-control " id="in" aria-label="...">
                        <div class="input-group-btn">
                            <button class="btn btn-default " type="submit" id="btnsec">
                                <span class="glyphicon glyphicon-search" aria-hidden="true"></span>
                            </button>
                        </div>
                    </div>

                </form>
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="#">管理后台</a></li>
                    <li><a href="#">我的学习</a></li>
                    <li><a href="#"><span class="glyphicon glyphicon glyphicon-bell" aria-hidden="true"></span></a></li>
                    <li><a href="#"><span class="glyphicon glyphicon glyphicon-shopping-cart" aria-hidden="true"></span></a></li>
                    <li><a href="#">登录/注册</a></li>
                </ul>
            </div>
            <!-- /.navbar-collapse -->
        </div>
        <!-- /.container-fluid -->
    </nav>
    <div class="out-box">
        <div class="container-box">

            <div class="title-box">
                <h4>我的购物车</h4>
                <span>共<span id="nums"></span>门课程</span>
            </div>
            <div class="b-20"></div>
            <div class="item-box">
                <div class="items">
                    <div class="items-title">
                        <div class="select">
                            <input type="checkbox" id="all-select">
                        </div>
                        <div class="img ">全选</div>
                        <div class="tname ">课程名称</div>
                        <div class="time ">学期或课程有效期</div>
                        <div class="price ">单价(元)</div>
                    </div>
                </div>
                <div class="b-20"></div>
                <div class="item">
                    <div class="item-title">
                        <div class="select">
                            <input type="checkbox" name="in-select">
                        </div>

                        <div class="img">
                            <span>机构 <span class="institution-name">日月光华</span></span>
                        </div>
                    </div>
                    <div class="courses">
                        <div class="course">
                            <div class="select">
                                <input type="checkbox" name="course-select" data-courseid="1">
                            </div>
                            <div class="img">
                                <img src="https://edu-image.nosdn.127.net/8ef49b986d8d45e395df3376eb5738d1.png?imageView&quality=100&crop=1_0_1078_607&thumbnail=450y250">
                            </div>
                            <div class="tname">
                                <a href="">Tensorflow深度学习入门与实战</a>
                            </div>
                            <div class="time">永久有效</div>
                            <div class="price">567</div>
                            <div class="delete">
                                <span class="glyphicon glyphicon-trash delbutn" aria-hidden="true"></span>
                            </div>
                        </div>




                    </div>
                    <div class="item-total">
                        <div class="total-contain">
                            <span class="total-tip ">该机构小计:￥<span class="total-tip-value">0</span></span>
                        </div>
                    </div>
                    <div class="b-20"></div>
                </div>
            </div>
            <div class="b-30"></div>
            <div class="end-box">
                <div class="end-container">
                    <a class="btn btn-default" id="totalbutn" role="butto" height="100%">去结算</a>
                    <div class="end-left">

                        <p>合计：<span id="totalprice">￥<span class="totalprice-value">0.0</span></span>
                        </p>

                        <p>(若购买享有优惠，相应金额将在订单结算页面减扣)</p>
                    </div>

                </div>
            </div>
        </div>
    </div>
    <div class="b-30"></div>
    <footer class="end-footer">
        <div class="footer-box">
            <div class="footer-box-left">
                <div class="footer-box-left-first m-20">
                    <span>网易云课堂 是网易公司（163.com）旗下专注职业技能提升的在线学习平台。</span>
                </div>
                <div class="footer-box-left-second f-fl">
                    <div class="second-row m-20"><a href="https://study.163.com/about/aboutus.htm#/about?aboutType=1">关于我们</a></div>
                    <div class="second-row m-20"><a href="https://study.163.com/about/aboutus.htm#/about?aboutType=2">联系我们</a></div>
                    <div class="second-row m-20"><a href="https://study.163.com/about/aboutus.htm#/about?aboutType=4">帮助中心</a></div>
                    <div class="second-roww m-20"><a href="https://www.icourse163.org/">中国大学mooc</a></div>
                    <div class="second-rowww m-20"><a href="https://geek.163.com/?utm_source=study.163.com&utm_medium=web_bottombanner&utm_campaign=business&utm_content=qxq20180720">网易卡撘编程</a></div>
                    <div class="second-row m-20"><a href="https://codecombat.163.com/">极客战记</a></div>
                </div>
                <div class="footer-box-left-third">
                    <span>©1997-2020&nbsp&nbsp网易公司&nbsp &nbsp版权所有粤B2-20090191-18 &nbsp&nbsp工业和信息化部备案管理系统网站</span>
                </div>
            </div>
            <div class="footter-box-right">
                <a class="btn btn-default" role="button" id="m-yktfoot_mlogo1"></a>
                <a class="btn btn-default" role="button" id="m-yktfoot_mlogo2"></a>
                <div class="m-yktfoot_share">

                </div>
            </div>
        </div>
    </footer>
    <script>
        var cartDl;
        $.ajax({                
            type:   "get",
                            url:   "http://localhost:8080/cart/findCart",
                            data:   "userid=1",
                            dataType:   "json",
                            success:   function(msg)  {                    
                cartDl = msg.cartDetailsList;
                // console.log(cartDl[0]);
                console.log(cartDl);
                //将cartdl数组中的数据顺序重排
                for (var i = 0; i < cartDl.length; i++) {
                    for (var j = 0; j < cartDl.length; j++) {
                        if (cartDl[i].course.institutionid < cartDl[j].course.institutionid) {
                            var t = cartDl[i];
                            cartDl[i] = cartDl[j];
                            cartDl[j] = t;
                        }
                    }
                }

                var two = new Array();
                // two[0] = cartDl[0];
                // alert(two[0]);
                var j = 0,
                    k = 0;
                two[j] = new Array();
                if (cartDl.length > 1) {
                    for (var i = 0; i < cartDl.length - 1; i++) {

                        two[j][k++] = cartDl[i];

                        if (cartDl.length > 1) {
                            if (cartDl[i].course.institution.inname == cartDl[i + 1].course.institution.inname) {
                                continue;
                            } else {

                                k = 0;
                                j++;
                                two[j] = new Array();
                            }
                        }

                    }

                    if (cartDl[cartDl.length - 1].course.institution.inname == cartDl[cartDl.length - 2].course.institution.inname) {
                        two[j][k] = cartDl[cartDl.length - 1];
                    } else {
                        // two[j + 1] = new Array();
                        two[j][0] = cartDl[cartDl.length - 1];
                    }
                } else {
                    two[j][0] = cartDl[0];
                }
                console.log(two);
                var v = '';

                var v2 = '</div><div class="item-total"><div class="total-contain"><span class="total-tip ">该机构小计:￥<span class="total-tip-value">0</span></span></div></div> </div><div class="b-20"></div>';
                for (var i = 0; i < two.length; i++) {
                    var j = 0;
                    var course = '';
                    for (; j < two[i].length; j++) {
                        course += '<div class="course"><div class="select"><input type="checkbox" name="course-select" data-courseid="' + two[i][j].courseid + '"></div><div class="img"><img src="' + two[i][j].course.viewsrc + '"></div><div class="tname"><a href="">' + two[i][j].course.coursename + '</a></div><div class="time">' + two[i][j].course.validtime + '</div><div class="price">' + two[i][j].course.courseprice + '</div><div class="delete"><span class="glyphicon glyphicon-trash delbutn" aria-hidden="true" data-cdid="' + two[i][j].id + '"></span></div></div>';
                        // console.log(two[i][j]);
                    }

                    course = '<div class="item"> <div class="item-title"><div class="select"><input type="checkbox"  name="in-select"></div><div class="img"><span>机构 <span class="institution-name">' + two[i][j - 1].course.institution.inname + '</span></span></div></div><div class="courses">' + course + v2;
                    v += course;

                }
                $(".item-box").append(v);
                $("#nums").text($(".course").length);
            }                            
        })

        //全选
        $("#all-select").click(function() {

                var state = this.checked;

                $("input[type='checkbox']").prop("checked", state);
                add($(".course"));

            })
            //机构全选
        $(document).on("click", "input[name='in-select']", function() {
                var state = this.checked;

                $(this).parent().parent().next().find("input").prop("checked", state);
                vadifyIn();
                add(this);
            })
            //course选择

        $(document).on("click", "input[name='course-select']", function() {
            var num = $(this).parents(".courses").find("input:checked").length;
            // alert(num);
            if (num === $(this).parents(".courses").find("input").length) {
                $(this).parents(".item").find("input[name='in-select']").prop("checked", true);


            } else {
                $(this).parents(".item").find("input[name='in-select']").prop("checked", false);

            }
            vadifyIn();
            add(this);
        })

        //删除
        $(document).on("click", ".delbutn", function() {
            var o = this;
            if ($(this).parents(".courses").children(".course").length == 1) {
                $(this).parents(".item").remove();
            } else {
                $(this).parents(".course").remove();
            }
            add(this);
            $.ajax({
                url: "http://localhost:8080/cart/delcartd",
                data: "cdid=" + parseInt($(o).attr("data-cdid")),
                dataType: "text",
                success: function(o) {
                    alert(o);

                }
            })
        })


        //submit

        $(document).on("click", "#totalbutn", function() {
            var a = $("input[name='course-select']:checked");
            console.log(a.attr("data-courseid"));

            var c = new Array();
            for (var i = 0; i < a.length; i++) {
                var object = {
                    id: null,
                    userid: 1,
                    courseid: 1
                }
                object.courseid = parseInt(a[i].getAttribute("data-courseid"));
                c[i] = object;
                console.log(JSON.stringify(c[i]));
            }
            alert(c);

            console.log(JSON.stringify(c));

            $.ajax({
                url: "http://localhost:8080/preorder/add",
                type: "post",
                contentType: "application/json;charset=utf-8",
                data: JSON.stringify(c),
                success: function(msg) {
                    window.location.href = "/order.html"
                }
            })

            // $.ajax({
            //     url:"http://localhost:8080/cart/delcartd"
            // })

        })


        //检查每个机构的状态
        function vadifyIn() {
            var selects = $("input[name='in-select']");
            var flag = true;
            for (var i = 0; i < selects.length; i++) {
                if (!selects[i].checked) {
                    flag = false;
                    break;
                }
            }

            $("#all-select").prop("checked", flag);

        }





        function add(o) {
            var s = $(o).parents(".item").children(".courses").find("input");
            var total = 0;
            for (var i = 0; i < s.length; i++) {
                // console.log(parseInt(s.parents(".course").find(".price")[i].innerText));
                if (s[i].checked) {
                    total += parseInt(s.parents(".course").find(".price")[i].innerText);
                }
            }
            var l = s.parents(".item").find(".total-tip-value");
            l.text(total);

            // $.each(l, function(index, item) {
            //     alert(item.innerText);
            // })


            totalAdd();
        }

        function totalAdd() {
            var s = $(".total-tip-value");
            var t = 0;
            for (var i = 0; i < s.length; i++) {
                // alert(s[i].innerText);
                t += parseInt(s[i].innerText);
            }
            $(".totalprice-value").text(t);
        }



        //重新定义排序规则
    </script>
</body>

</html>